<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>crawler-manager-admin</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/css/gloabl.css">
    <link rel="stylesheet" href="/css/footer.css">
    <script type="text/javascript" src="/layui/layui.js"></script>
    <script type="text/javascript" src="/js/gloab.js"></script>
    <style>
        main {
            background: #eeeeee;
            width: 100%;
            height: 89%;
            padding: 0;
        }

        .container {
            padding: 10px 30px;
            margin: 0 5%;
        }
    </style>
</head>
<body>
<#include "include/header.ftl">
<main id="main">
    <div class="container">
        <div class="layui-card">
            <div class="layui-card-body">
                <table id="dataTable" lay-filter="dataTable"></table>
            </div>
        </div>
    </div>
</main>
<#include "include/footer.ftl">
</body>
<script type="text/javascript">
    layui.use(['element', 'table', 'layer'], function () {
        const element = layui.element;
        const table = layui.table;
        const $ = layui.$;
        const layer = layui.layer;

        let height = $("#main").height();
        let width = $("#main").width();

        const tableHeight = height * 0.9;
        //第一个实例
        const tableIns = table.render({
            elem: '#dataTable'
            , toolbar: "#headerBar"
            , height: tableHeight
            , url: '/data/joblist' //数据接口
            , cols: [[ //表头
                {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left', align: 'center'}
                , {field: 'jobName', title: '任务', width: 180, align: 'center'}
                , {
                    field: 'status', title: '状态', width: 96, sort: true, align: 'center', templet: function (e) {
                        return e.status === 'Y' ? `<span style="color: green">运行中</span>` : `<span style="color: red">停止</span>`;
                        // return `<span style="color: green">运行中</span>`
                    }
                }
                , {field: 'dataCount', title: '数据量', width: 100, sort: true, align: 'center'}
                , {field: 'retry', title: '重试设定', width: 100, align: 'center'}
                , {
                    field: 'timeInterval', title: '时间间隔', width: 90, align: 'center', templet: function (e) {
                        return e.timeInterval + 's';
                    }
                }
                , {field: 'heath', title: '健康状况', width: 180, align: 'center'}
                , {
                    field: 'lastExcuteTime', title: '上次运行时间', width: 180, align: 'center', templet: function (e) {
                        return e.lastExcuteTime === null ? "尚未运行" : e.lastExcuteTime;
                    }
                }
                , {
                    field: 'lastErrorTime', title: '上次异常时间', width: 180, align: 'center', templet: function (e) {
                        if (e.lastErrorTime === null) return '<span style="color: green">暂无</span>';
                        return '<span style="color: red">' + e.lastErrorTime + '</span>';
                    }
                }
                , {field: 'crawlerId', title: 'Crawler ID', width: 120, sort: true, align: 'center'}
                , {fixed: 'right', width: 320, align: 'center', toolbar: '#toolbar', title: '操作'}
            ]],
            limit: 10,
            limits: [10, 20, 50],
            page: true
        });


        table.on('tool(dataTable)', function (obj) {
            let data = obj.data;
            console.log(data);
            let layEvent = obj.event;
            // console.log(width, height);
            if (layEvent === 'paramsSetting') {
                layer.open({
                    type: 2,
                    title: '参数设置',
                    content: ['/paramsSetting/' + data.crawlerId],
                    area: [width + 'px', height + 'px']
                })
            } else if (layEvent === 'startOrStop') {
                $.ajax({
                    url: '/task/startorstop/' + data.id,
                    type: 'get',
                    success: function (res, textStatus) {
                        if (res.code === 0) {
                            if (data.status === 'N')
                                layer.msg('任务已开启', {icon: 6})
                            else
                                layer.msg('任务已停止', {icon: 6})
                            tableIns.reload()
                        } else {
                            layer.msg('开启异常', {icon: 5})
                        }
                    },
                    error: function (a, b, c) {
                        alert("error");

                    }
                })
            } else if (layEvent === 'jobSetting') {
                layer.open({
                    type: 2,
                    title: 'Job设置',
                    content: ['/jobSetting/' + data.id],
                    area: [width + 'px', height + 'px']
                })
            } else if (layEvent === 'delJob') {
                layer.confirm('确定要删除此任务?', {
                    btn: ['确定', '算了算了'] //可以无限个按钮

                }, function (index, layero) {
                    fetch("/delJob/" + data.id, {
                        method: 'delete'
                    }).then(res => res.json()).then(json => {
                        if (json.code === 0) {
                            tableIns.reload();
                            return layer.msg('删除成功', {icon: 6})
                        }
                        layer.msg('删除失败', {icon: 5})
                    }).catch(err => {
                        layer.msg('请求异常', {icon: 5})
                        console.log("error", err);
                    })
                }, function (index) {
                    console.log(index)
                });
            }
        })

        //监听table header toolbar
        table.on('toolbar(dataTable)', function (obj) {
            if (obj.event === 'addJob') {
                layer.open({
                    type: 2,
                    title: 'Job设置',
                    content: ['/addJob'],
                    area: [width + 'px', height + 'px']
                })
            }
        });
    });
</script>
<script type="text/html" id="toolbar">
    <a class="layui-btn layui-btn-xs layui-btn" lay-event="startOrStop">开启/停止</a>
    <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="jobSetting">Job设置</a>
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="paramsSetting">参数设置</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delJob">删除任务</a>
</script>
<script type="text/html" id="headerBar">
    <a class="layui-btn layui-btn-xs" lay-event="addJob">新增任务</a>
</script>
</html>